import TimelineEvent from "./TimelineEvent.js";
import PointerEvent from "./PointerEvent.js";
import ScaleEvent from "./ScaleEvent.js";
import Timeline from "./Timeline.js";


const $container = $('.time-axis-container');

let defaultWidth = 5020;

const timeline = Timeline.getInstance();



function createTimeline (width, left) {
    const $timeAxis = timeline.init(width);
    const onTimeAxisScroll = (moveX, event) => {
        const $pointer = $('.time-pointer');
        const $desc = $('.datetime-description');

        if (event) moveX = moveX / width * 100 + '%'
        $pointer.css('left', moveX);
        $desc.css('left', moveX);
    }

    $container.empty().append($timeAxis);

    const $scroller = $('.time-scroller');
    const $timeline = $('.time-timeline');
    console.log(left);
    if (left) {
        $timeline.css('left', left);
        $scroller.css('left', left);
    }

    if ($scroller.length) {
        const $pointer = $('.time-pointer');

        /***************************************************************
         *              指针 - 滑动事件
         ***************************************************************/
        const pointer = new PointerEvent({
            $selector: $pointer,
            $scroller,
            onTimeAxisScroll
        })
        /***************************************************************
         *              添加时间轴 - 滑动事件
         ***************************************************************/
        const pointerLine = new PointerEvent({
            $selector: $scroller.find('.time-axis-scroll'),
            $container,
            $timeline,
            $scroller,
            onTimeAxisScroll
        })
        /***************************************************************
         *              添加滚动条超出时的拖动事件
         ***************************************************************/
        const timeline = new TimelineEvent({
            width,
            $container,
            $timeline,
            $scroller,
            onTimelineScroll(moveX) {
                const $pointer = $('.time-pointer');
                const timelineLeft = parseInt($timeline.css('left') || 0);
                const left = parseInt($pointer.css('left') || 0) + timelineLeft;
                $timeline.css('left', moveX);
                $scroller.css('left', moveX);
                console.log('left: => ', moveX, left, Math.abs(moveX) + left);
                $pointer.css('left', Math.abs(moveX) + left);
            }
        })
        /***************************************************************
         *              添加滚动条超出时的拖动事件
         ***************************************************************/
        const scale = new ScaleEvent({
            width,
            $container,
            $timeline,
            $scroller,
            update(width, left) {
                const offsetLeft = parseInt($('.time-scroller').css('left') || '0');
                const timelineLeft = left + Math.abs(offsetLeft);
                let __left = -((timelineLeft  * width / defaultWidth) - left);

                pointer.off();
                pointerLine.off();
                timeline.off();
                scale.off();

                console.log(__left);
                // if (width < $container.width() + Math.abs(offsetLeft)) return;
                if (__left > 0) __left = 0;
                createTimeline (width, __left)
                defaultWidth = width;
                // console.log(width)
            }
        })
    }
}

createTimeline (defaultWidth)

